<template>
  <div class="app-container">
    <div class="part1">
      <div class="container">
        <img src="../../assets/images/certificate-2.png" class="bg1" alt="" />
        <img src="../../assets/images/certificate-3.png" class="bg2" alt="" />
        <div class="info">
          <h1 class="title1">2022年9月（第66次）全国计算机等级考试</h1>
          <h2 class="title2">2022年9月24日-26日</h2>
          <p class="abstract">
            全国计算机等级考试（National Computer Rank
            Examination，简称NCRE），是经原国家教育委员会（现教育部）批准，由教育部教育考试院（原教育部考试中心）主办，面向社会，用于考查应试人员计算机应用知识与技能的全国性计算机水平考试体系。
          </p>
          <a href="http://ncre.neea.edu.cn/" target="_black" class=""
            >http://ncre.neea.edu.cn/</a
          >
        </div>
      </div>
    </div>
    <div class="part2">
      <div class="container">
        <p class="tit">技能大赛</p>
        <div class="content">
          <a href="" class="info">
            <p class="t1">CSDN软件开发精英赛</p>
            <p class="t2">
              大赛联合广大科技企业设置丰厚的礼品，用户可在大赛期间参与比赛，成绩优异者即会获得相应的奖品。比赛将于2021年12月21日举行，每月按照参赛者分数进行月排名，欢迎广大技术从业者、爱好者踊跃报名…
            </p>
            <p class="t3">查看更多>></p>
          </a>
          <img src="../../assets/images/certificate-1.png" alt="" class="bg" />
        </div>
      </div>
    </div>
    <div class="part3">
      <div class="container">
        <div class="top">
          <a href="javascript:void(0);" v-for="item in 6" :key="item">
            <div class="item">
              <p class="p1">一级</p>
              <p class="p2">全国计算机等级考试</p>
              <p class="p3">程序猿</p>
            </div>
          </a>
        </div>
        <div class="bottom">
          <div class="item">
            <div class="item-top">
              <div class="info">
                <p class="tit">C1 认证</p>
                <p class="desc">见习工程师能力认证</p>
              </div>
              <p class="item-middle">
                通过C1认证，表明持有人具有软件开发所必需的基础知识，具备“计算机通识”、“程序逻辑”和“Web基础”能力，其中程序逻辑使用JavaScript语言作为编程语言。确保持有者是可以从事软件开发相关的见习/实习类岗位工作的。
              </p>
              <div class="item-bottom">
                <a href="" target="_blank" class="btn btn1">考试大纲</a>
                <a href="" target="_blank" class="btn btn2">我要认证</a>
              </div>
            </div>
          </div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 认证·考试
export default {}
</script>

<style lang="less" scoped>
.part1 {
  position: relative;
  height: 500px;
  background-color: #071328;
  .bg1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 770px;
    height: 258px;
  }
  .bg2 {
    position: absolute;
    bottom: 0;
    width: 166px;
    height: 70px;
  }
  .info {
    height: 400px;
    padding-top: 150px;
    .title1 {
      color: #fff;
      font-size: 35px;
      font-weight: 600;
      line-height: 70px;
    }
    .title2 {
      margin-top: 20px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 20px;
      line-height: 28px;
    }
    .abstract {
      margin-top: 12px;
      width: 564px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      line-height: 24px;
    }
    a {
      color: #fff;
      padding-top: 20px;
    }
  }
}
.part2 {
  padding-top: 60px;
  height: 460px;

  .tit {
    font-size: 24px;
    color: #111;
    font-weight: bold;
  }
  .content {
    position: relative;
    .bg {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      width: 960px;
      height: 380px;
      border-radius: 2px;
    }
    .info {
      padding: 40px 36px 0;
      position: absolute;
      top: 60px;
      left: 0;
      z-index: 2;
      width: 420px;
      height: 250px;
      background: #ffffff;
      -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
      border-radius: 2px;
      .t1 {
        font-size: 16px;
        color: #333;
        line-height: 24px;
        font-weight: bold;
      }
      .t2 {
        margin-top: 12px;
        font-size: 14px;
        color: #666;
        line-height: 28px;
        text-align: justify;
      }
      .t3 {
        display: block;
        margin-top: 36px;
        font-size: 14px;
        color: #333;
        line-height: 24px;
        width: 90px;
      }
    }
  }
}
.part3 {
  background: #f5f5f5;
  .top {
    display: flex;
    justify-content: space-around;
    padding: 50px 80px 40px 24px;
    .item {
      background-image: url('../../assets/images/poly.png');
      background-repeat: no-repeat;
      width: 139px;
      height: 160px;
      text-align: center;
      .p1 {
        padding-top: 34px;
        font-size: 24px;
        font-weight: bold;
        line-height: 33px;
      }
      .p2 {
        padding-top: 5px;
        font-size: 14px;
        font-weight: bold;
        line-height: 24px;
      }
      .p3 {
        font-size: 14px;
        color: #666666;
        line-height: 24px;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    .item {
      padding: 28px 36px;
      width: 300px;
      background: #fff;
      border-radius: 2px;
      transition: all 0.2s;
      cursor: default;
      .item-top {
        .info {
          padding-top: 6px;
          .tit {
            color: #111;
            font-size: 24px;
            font-weight: bold;
            line-height: 24px;
          }
          .desc {
            margin-top: 10px;
            color: #111;
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
      .item-middle {
        margin-top: 16px;
        font-size: 14px;
        color: #666;
        line-height: 28px;
        height: 176px;
      }
      .item-bottom {
        display: flex;
        justify-content: space-between;
        .btn1 {
          border: 1px solid #ff5100;
          color: #ff5100;
        }
        .btn {
          width: 140px;
          height: 44px;
          border-radius: 23px;
          text-align: center;
          line-height: 44px;
          transition: all 0.2s;
        }
        .btn2 {
          background-color: #ff5100;
          color: #fff6f2;
        }
      }
    }
  }
}
</style>
